<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-row :gutter="20" style="padding: 15px 0">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】:{{ filterQuestions(questionsList.questionType) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】:{{ questionsList.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】:{{ filterDefficult(questionsList.difficulty) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】:{{ questionsList.tags }}
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】:{{ questionsList.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】:{{ questionsList.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】:{{ questionsList.direction }}
          </div></el-col
        >
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
    <!-- 题干 -->
    <hr />
    <div class="main">
      <p>【题干】:</p>
      <p style="color: blue">{{ toText(questionsList.question) }}</p>
      <el-form v-if="['1', '2', 1, 2].includes(questionsList.questionType)">
        <p>选项:(以下选中的选项为正确答案)</p>
        <el-form-item>
          <!-- 单选1 -->
          <div v-if="+questionsList.questionType === 1">
            <el-radio-group v-model="radio">
              <el-radio
                v-for="item in questionsList.options"
                :key="item.id"
                :label="item.isRight"
                >{{ item.title }}</el-radio
              >
            </el-radio-group>
          </div>
          <!-- 多选2 -->
          <div v-else-if="+questionsList.questionType === 2">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in questionsList.options"
                :key="item.id"
                :label="item.isRight"
                >{{ item.title }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <hr />
    <!-- 底部 -->
    <div class="footer">
      <div>
        <span>【参考答案】:</span>
        <el-button
          size="small"
          type="danger"
          style="margin-left: 10px"
          @click="showPlayer"
          >视频答案预览</el-button
        >
        <div>
          <video
            v-if="showVideo"
            style="width: 400px; height: 300px; margin: 10px 0"
            controls
            :src="videoUrl"
          ></video>
        </div>
      </div>
      <hr />
      <div>
        <span>【答案解析】:{{ toText(questionsList.answer) }}</span>
      </div>
      <hr />
      <div>
        <span>【题目备注】:{{ questionsList.remarks }}</span>
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close">
      <el-button type="primary" @click="close()">关闭</el-button>
    </div>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
import { html2Text } from '@/utils'

export default {
  name: '',
  props: {
    detailVisible: {
      type: Boolean
    }
  },
  data () {
    return {
      radio: 1,
      questionsList: [],
      checkList: [1],
      data: {
        id: '',
        isNext: false
      },
      showVideo: false,
      videoUrl: ''
    }
  },
  created () {
    setTimeout(() => {
      this.loadDetail()
    }, 50)
  },
  methods: {
    // 题目难度转换
    changeDifficulty (value) {
      if (+value === 1) return '简单'
      if (+value === 2) return '一般'
      if (+value === 3) return '困难'
    },
    async loadDetail () {
      const res = await detail(this.data)
      this.questionsList = res.data
      console.log(res, 66666)
    },
    // html转text
    toText (val) {
      if (!val) return ''
      return html2Text(val)
    },
    // 显示播放器
    showPlayer () {
      this.showVideo = true
      this.$nextTick(() => {
        this.videoUrl = this.questionsList.videoURL
      })
    },
    // 筛选难度
    filterDefficult (id) {
      const whiteList = ['1', '2', '3', 1, 2, 3]
      if (whiteList.includes(id)) {
        var filterList = [
          { id: '1', type: '简单' },
          { id: '2', type: '一般' },
          { id: '3', type: '困难' }
        ]
        // eslint-disable-next-line eqeqeq
        return filterList.find((item) => item.id == id).type
      } else {
        return ''
      }
    },
    // 筛选题目类型
    filterQuestions (id) {
      const whiteList = ['1', '2', '3', 1, 2, 3]
      if (whiteList.includes(id)) {
        var filterList = [
          { id: '1', type: '单选' },
          { id: '2', type: '多选' },
          { id: '3', type: '简答' }
        ]
        // eslint-disable-next-line eqeqeq
        return filterList.find((item) => item.id == id).type
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-radio {
  display: block;
  padding: 8px 0px;
}
.el-checkbox {
  display: block;
}
.el-form-item {
  // 屏蔽所有事件
  pointer-events: none;
}
</style>
